<script lang="ts">
	import Banner, { Label, CloseReason } from '@smui/banner';
	import Button from '@smui/button';
	import Instagram from '$lib/images/instagram.svg';

	let open = false;
	let centered = true;
	let mobileStacked = true;

	const closedReasons = {
		[CloseReason.PRIMARY]: 'Primary',
		[CloseReason.SECONDARY]: 'Secondary',
		[CloseReason.UNSPECIFIED]: 'Unspecified'
	};

	let closedReason = 'None yet';

	function handleBannerClosed(event: CustomEvent<{ reason: CloseReason }>) {
		closedReason = closedReasons[event.detail.reason];
	}
</script>

<Banner
	class="bg-gray-2 color-blue-7 fixed bottom-0 z-10"
	bind:open
	bind:centered
	bind:mobileStacked
	content$class="max-w-960px"
	on:SMUIBanner:closed={handleBannerClosed}
>
	<Label slot="label" class="color-gray-5!">
		We use cookies to provide you with the best experience. Click accept and continue.
	</Label>
	<svelte:fragment slot="actions">
		<Button>Accept</Button>
	</svelte:fragment>
</Banner>
<footer class="w-full h-100px box-border font-size-14px bg-gray-1">
	<p class="letter-spacing-1px text-center">© Copyright 2020-2025 || All Rights Reserved</p>
	<a
		href="https://instagram.com/macnninc/"
		class="flex-cc hover:no-underline color-gray-7!"
		target="_blank"
		rel="noopener"
	>
		<object type="image/svg+xml" title="Instagram" class="w-24px h-24px" data={Instagram}>
			Your browser does not support SVG
		</object>
		Instagram
	</a>
</footer>

<style>
	footer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 12px;
	}
</style>
